<template>
  <div class="logo-wrapper">
    <img
      v-if="showLogo"
      class="logo-img"
      :src="require('../../assets/work_logo.png')"
    />
    <transition v-if="showTitle" name="el-fade-in-linear">
      <span v-show="isTitleShow" class="logo-title">vue-admin-work</span>
    </transition>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";

@Component({
  name: "LyLogo",
  components: {},
})
export default class LyLogo extends Vue {
  //#region vue prop =================================
  @Prop({
    required: false,
    default: true,
  })
  showTitle: boolean;

  @Prop({
    required: false,
    default: true,
  })
  showLogo: boolean;

  @Prop({
    required: false,
    default: false,
  })
  alwaysShow: boolean;

  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================
  get isTitleShow(): boolean {
    return LayoutStoreModule.isCollapse === false || this.alwaysShow;
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyLogo " + "created");
  }

  mounted() {
    console.log("LyLogo " + "mounted");
  }

  beforeDestroy() {
    console.log("LyLogo " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================

  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
@import "src/assets/styles/variables.scss";
.logo-wrapper {
  height: $logoHeight;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  .logo-img {
    width: 30px;
  }
  .logo-title {
    margin-left: 5px;
    font-weight: bold;
  }
}
</style>
